<template>
  <back-dialog-base
    @onCommit="handleSubmit"
    @close="close"
    :title="title"
    :visible="visibleDialog"
    width="446px"
  >
    <template #content>
      <div class="content-warp">
        <div class="left-form">
          <el-form
            ref="formRef"
            :model="form"
            :rules="rules"
            label-width="120px"
          >
            <el-form-item label="所属管廊：" prop="pipeName">
              <el-select
                v-model="form.pipeName"
                clearable
                placeholder="--请选择--"
              >
                <el-option
                  v-for="item in pipeNameDrop"
                  :key="item.id"
                  :label="item.pipeName"
                  :value="item.pipeName"
                />
              </el-select> </el-form-item
            ><el-form-item label="日期：" prop="dateTime">
              <el-date-picker
                v-model="form.dateTime"
                type="month"
                placeholder="--请选择--"
                value-format="YYYY-MM"
              />
            </el-form-item>

            <el-form-item label="本月指数：" prop="indexNumber">
              <el-input
                v-model="form.indexNumber"
                placeholder="请输入…"
              ></el-input>
            </el-form-item>
            <el-form-item label="上月指数：" prop="lastIndexNumber">
              <el-input
                v-model="form.lastIndexNumber"
                placeholder="请输入…"
              ></el-input>
            </el-form-item>
            <el-form-item label="计费电量：" prop="chargeableElectricity">
              <el-input
                v-model="form.chargeableElectricity"
                placeholder="请输入…"
              ></el-input>
            </el-form-item>
            <el-form-item label="金额：" prop="amount">
              <el-input v-model="form.amount" placeholder="请输入…"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </template>
  </back-dialog-base>
</template>

<script setup>
import {
  reactive,
  defineProps,
  ref,
  defineEmits,
  watch,
  onMounted,
  nextTick,
  defineExpose
} from 'vue'
import BackDialogBase from '@/components/BackDialogBase'
import { message } from '@/utils/message'
import { energySave, commonPipeNameDrop } from '@/api/back'
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  visibleDialog: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  }
})
const pipeNameDrop = ref([]) //所属管廊下拉列表
const formRef = ref(null)
const emits = defineEmits(['onReload'])
const form = reactive({
  amount: '', //金额
  chargeableElectricity: '', //计费电量
  dateTime: '', //日期
  id: '', //主键ID
  indexNumber: '', //本期指数
  isDeleted: '', //删除标志位
  lastIndexNumber: '', //上期指数
  phoneNumber: '', //联系方式
  pipeId: '', //所属管廊ID
  pipeName: '' //所属管廊名称
})
//获取所属管廊下拉列表
const GetpipeNameDrop = () => {
  commonPipeNameDrop().then((res) => {
    let data = res
    pipeNameDrop.value = [...data]
  })
}
onMounted(() => {
  GetpipeNameDrop()
})

// const clearForm = () => {
//   if (!formRef.value) return
//   formRef.value.resetFields()
//   form.value = {
//     beginTime: '', //开始时间
//     director: '', //作业负责人
//     endTime: '', //结束时间
//     id: '', //主键ID
//     isDeleted: '', //删除标志位
//     pipeId: '', //所属管廊ID
//     pipeName: '', //管廊名称
//     position: '', //所在位置
//     remark: '' //施工描述
//   }
// }

const close = () => {
  // formRef.value.resetFields()
}

const save = async (data) => {
  // data.dateTime = data.dateTime.slice(0, 19)

  const res = await energySave(data)
  if (res && res.id) {
    message({ type: 'success', message: '操作成功!' })
    // clearForm()
    emits('onReload')
  }
}
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      save(Object.assign(props.rowData, form))
      // console.log('验证通过')
    } else {
      // console.log('验证错误')
      return false
    }
  })
}

watch(
  () => props.rowData,
  () => {
    form.pipeName = props.rowData.pipeName
    form.dateTime = props.rowData.dateTime
    form.indexNumber = props.rowData.indexNumber
    form.lastIndexNumber = props.rowData.lastIndexNumber
    form.chargeableElectricity = props.rowData.chargeableElectricity
    form.amount = props.rowData.amount
    form.id = props.rowData.id
    form.isDeleted = props.rowData.isDeleted
    form.phoneNumber = props.rowData.phoneNumber
    form.pipeId = props.rowData.pipeId
  }
)
const cleara = () => {
  nextTick(() => {
    formRef.value.clearValidate()
  })
}
defineExpose({ cleara })
const rules = reactive({
  pipeName: [
    {
      required: true,
      message: '所属管廊不能为空',
      trigger: 'change'
    }
  ],
  dateTime: [
    {
      required: true,
      message: '日期不能为空',
      trigger: 'blur'
    }
  ],
  indexNumber: [
    {
      required: true,
      message: '本月指数不能为空',
      trigger: 'blur'
    }
  ],
  lastIndexNumber: [
    {
      required: true,
      message: '上月指数不能为空',
      trigger: 'blur'
    }
  ],
  chargeableElectricity: [
    {
      required: true,
      message: '计费电量不能为空',
      trigger: 'blur'
    }
  ],
  amount: [
    {
      required: true,
      message: '金额不能为空',
      trigger: 'blur'
    }
  ]
})
</script>
<style lang="scss" scoped>
:deep(.el-input__inner) {
  width: 212px;
}
.content-warp {
  width: 100%;
  height: 100%;
  display: flex;
  .left-form {
    flex: 4;
  }
  .right-form {
    flex: 6;
    height: 780px;
    overflow: auto;
    padding-left: 60px;
    &::-webkit-scrollbar-track-piece {
      background: #d3dce6;
    }

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: #d6d6d680;
      border-radius: 20px;
    }
    .item-form {
      width: 100%;
      display: flex;
      margin-bottom: 30px;
      .title {
        width: 80px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        line-height: 19px;
        color: #333333;
        display: flex;
        .line-tag {
          width: 4px;
          height: 14px;
          background: #ff9502;
          border-radius: 4px;
          margin-right: 5px;
        }
      }
      .form-content {
        width: calc(100% - 120px);
        display: flex;
        flex-direction: column;
        .btns-row {
          width: 100%;
          height: 35px;
          display: flex;
          position: relative;
          margin-bottom: 6px;
          .tags {
            width: calc(100% - 45px);
            display: flex;
            column-gap: 4px;
            overflow-x: auto;
            &::-webkit-scrollbar-track-piece {
              background: #d3dce6;
            }

            &::-webkit-scrollbar {
              width: 3px;
              height: 3px;
            }

            &::-webkit-scrollbar-thumb {
              background: #ff9502;
              border-radius: 20px;
            }
          }
          .add-btn {
            width: 40px;
            height: 32px;
            background: rgba(255, 255, 255, 0.39);
            border: 1px solid #ff9502;
            border-radius: 5px;
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 30px;
            color: #ff9502;
            text-align: center;
            position: absolute;
            right: 0;
            cursor: pointer;
            &:hover {
              background: rgba(255, 255, 255, 0.22);
            }
          }
        }
        .form-card {
          width: 100%;
          border: 1px solid #d3dbe5;
          border-radius: 4px;
          padding: 20px;
        }
      }
    }
  }
}
</style>
